<template>
  <div class="swiper-container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="d in data"
        :key="d.id"
      >
        <img
          :src="d.img"
          alt=""
          @click="handleClick"
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Swipe, SwipeItem } from 'vant'
  Vue.use(Swipe).use(SwipeItem)

  export default {
    props: ['data'],

    methods: {
      handleClick() {
        this.$router.push('/detail')
      }
    }
  }
</script>

<style lang="scss" scoped>
.swiper-container {
  height: 0;
  font-size: 0;
  padding-bottom: 66.66666667%;
}
</style>